<template>

<!--  <main-image :src="'/example/broadcast_chart_example.png'" style="margin-top: 30px;" />-->
<div class="page-broad">
  <vue-particles :particleOpacity="0.1" :particlesNumber="150" :lineOpacity="0.1" shapeType="edge"
                 style="width: 100%;height: 100%; position: absolute;z-index: 0;"></vue-particles>
  <el-row :gutter="20" class="page-chart">
    <el-col :sapn="8">
      <v-chart class="BroadcastOnlineChart" :options="broadcastOnlineOptions"/>
    </el-col>

    <el-col :span="8">

    </el-col>
    <el-col :span="8">

    </el-col>
  </el-row>
  <el-divider></el-divider>
  <el-row :gutter="20" class="page-chart">
    <el-col :sapn="8">

    </el-col>

    <el-col :span="8">

    </el-col>
    <el-col :span="8">

    </el-col>
  </el-row>
  <el-divider></el-divider>
  <el-row :gutter="20" class="page-chart">
    <el-col :sapn="8">

    </el-col>

    <el-col :span="8">

    </el-col>
    <el-col :span="8">

    </el-col>
  </el-row>
</div>


</template>
<script lang="ts">
import Vue from 'vue';
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import MainImage from "@/components/Basic/Image/MainImage.vue";

export default Vue.extend({
  components: { BasicCard, MainImage },

  computed: {
    broadcastOnlineOptions() {
      return {
        title: {
          text: '广播在线统计图',
          subtext: 'The Online Statistics Charts Of Broadcast',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '10%',
          top: '10%',
          data: ['在线设备', '离线设备', '故障设备',],
          textStyle: {
            color: "#FFFFFF"
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 854, name: '在线设备', itemStyle: {color: "#89a0af"}},
              {value: 107, name: '离线设备', itemStyle: {color: "#d2c4b3"}},
              {value: 27, name: '故障设备', itemStyle: {color: "#d04c00"}},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
  },
})

</script>
<style lang="scss" scoped>
$_chart_titleHeight: 60px;
$_chart_mainHeight: 100vh;

.page-broad{
  width: 100%;
  min-height: calc(100vh - 100px);
  background: linear-gradient(to right top, #0e343d, #162450, #090b38);
  padding-left: 1rem;
  padding-right: 1rem;
  box-shadow: 0 0 3rem rgba(100, 200, 255, .5) inset;
}
.page-chart{
  height: 30vh;
}
.BroadcastOnlineChart {
  width: 550px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}
</style>
